<template>
  <div class="front">
    <div class="blogitem">
      <el-card class="itemCard">
        <h2 v-text="blog.title"
            style="text-align:center"></h2>
        <!-- <div class="content markdown-body"
             v-html="blog.content"
             style="min-height:700px">
        </div> -->
        <mavon-editor class="md appendmd"
                      :value="blog.content"
                      :subfield="false"
                      :defaultOpen="'preview'"
                      :toolbarsFlag="false"
                      :editable="false"
                      :scrollStyle="true"
                      :ishljs="true" />

        <el-empty v-if="blog== null || (blog.title.trim() == '' && blog.content.trim() == '')"
                  style="height: 100%;"
                  description="未找到文章"></el-empty>
      </el-card>
    </div>
  </div>
</template>
<script>
import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body
export default {
  name: 'BlogDetail',
  components: {},
  props: {},
  data() {
    return {
      blog: {
        id: '',
        title: '',
        description: '',
        content: '',
      },
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.clear()
      this.blog.id = this.$route.params.blogId
      if (this.blog.id) {
        this.$axios.get('/blog/detail?id=' + this.blog.id, {}).then((res) => {
          let blog = res.data.data

          // var MarkdownIt = require('markdown-it'),
          //   md = new MarkdownIt()
          // var result = md.render(blog.content)
          this.blog.id = blog.id
          this.blog.title = blog.title
          this.blog.content = blog.content
        })
      }
    },
    clear() {
      this.blog.id = ''
      this.blog.title = ''
      this.blog.description = ''
      this.blog.content = ''
    },
  },
  watch: {},
  computed: {},
  mounted() {},
}
</script>
<style scoped>
img {
  margin: 0 auto;
}
.appendmd {
  min-height: 700px;
}
</style>